<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XX网 - 用户注册</title>
<link rel="stylesheet" href="__APP__/css/themes/base/jquery.ui.all.css" />
<link rel="stylesheet" href="__APP__/css/datepicker.css" />
<script src="__APP__/js/jquery-1.9.1.min.js"></script>
<script src="__APP__/js/jquery.ui.core.js"></script>
<script src="__APP__/js/jquery.ui.widget.js"></script>
<script src="__APP__/js/jquery.ui.datepicker.js"></script>
<script src="__APP__/js/jquery.ui.datepicker-zh-TW.js"></script>


<style type="text/css">
html{font-size:12px;}
fieldset{width:520px; margin: 0 auto;}
legend{font-weight:bold; font-size:14px;}
label{float:left; width:70px; margin-left:10px;font-size:12px;}
.left{margin-left:80px;}
.input{width:150px;}
.error{border:1px solid red}
span{color: #666666;font-size:12px;}
p{font-size:12px;}

</style>

<script>
$(function() {
	$( "#datepicker" ).datepicker({
		changeMonth: true,
		changeYear: true	
	});
	$( "#datepicker" ).datepicker( $.datepicker.regional[ "zh-TW" ] );
	$( "#datepicker" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
});

$(document).ready(function(){
	$("#email").focus(function(){
		$("#errorEmail").hide();
		$("#email").removeClass("error");
	});
	$("#email").blur(function(){
		var re = /^\w+@(?!-)([a-z0-9-]+\.)+[a-z]{2,4}$/i;
		if(!re.test($("#email").val())){
			$("#errorEmail").show();
			$("#email").addClass("error");
			}

	});
	$("#password").focus(function(){
		$("#errorPassword").hide();
		$("#password").removeClass("error");
	});
	$("#password").blur(function(){
		if($("#password").val().length<6){
			$("#errorPassword").show();
			$("#password").addClass("error");
			}

	});
	$("#username").focus(function(){
		$("#errorUsername").hide();
		$("#username").removeClass("error");
	});
	$("#username").blur(function(){
		if($("#username").val().length==0){
			$("#errorUsername").html("请填写真实姓名");
			$("#errorUsername").show();
			$("#username").addClass("error");
			}
		if($("#username").val().length>30){
			$("#errorUsername").html("长度不能大于30字");
			$("#errorUsername").show();
			$("#username").addClass("error");
			}

	});

	$("#sex").change(function(){
		if($("#sex").val()=="请选择"){
			$("#errorSex").show();
			$("#sex").addClass("error");
			}
		else{
			$("#errorSex").hide();
			$("#sex").removeClass("error");
			}

	});
	
	$("#datepicker").focus(function(){
		$("#errorDatepicker").hide();
		$("#datepicker").removeClass("error");
	});
	$("#datepicker").focus(function(){
		$("#errorDatepicker").hide();
		$("#datepicker").removeClass("error");
	});
	$("#datepicker").change(function(){
		var re = /^\d{4}-\d{2}-\d{2}$/;
		if($("#datepicker").val().length==0){
			$("#errorDatepicker").html("请选择出生日期");
			$("#errorDatepicker").show();
			$("#datepicker").addClass("error");
			}
		else if(!re.test($("#datepicker").val())){
			$("#errorDatepicker").html("出生日期格式为yyyy-mm-dd，e.g. 1989-02-24");
			$("#errorDatepicker").show();
			$("#datepicker").addClass("error");
			}

	});
		
});

function InputCheck(RegForm)
{
	var re = /^\w+@(?!-)([a-z0-9-]+\.)+[a-z]{2,4}$/i;
	if(!re.test($("#email").val())){
		$("#errorEmail").show();
		$("#email").addClass("error");
		return false;
		}

	if($("#password").val().length<6){
		$("#errorPassword").show();
		$("#password").addClass("error");
		return false;
		}
	
	if($("#username").val().length==0){
		$("#errorUsername").html("请填写真实姓名");
		$("#errorUsername").show();
		$("#username").addClass("error");
		return false;
		}
	
	if($("#username").val().length>30){
		$("#errorUsername").html("长度不能大于30字");
		$("#errorUsername").show();
		$("#username").addClass("error");
		return false;
		}

	if($("#sex").val()=="请选择"){
		$("#errorSex").show();
		$("#sex").addClass("error");
		return false;
		}

	var re2 = /^\d{4}-\d{2}-\d{2}$/;
	if($("#datepicker").val().length==0){
		$("#errorDatepicker").html("请选择出生日期");
		$("#errorDatepicker").show();
		$("#datepicker").addClass("error");
		return false;
		}
	else if(!re2.test($("#datepicker").val())){
		$("#errorDatepicker").html("出生日期格式为yyyy-mm-dd，e.g. 1989-02-24");
		$("#errorDatepicker").show();
		$("#datepicker").addClass("error");
		return false;
		}
}
</script>

</head>
<body>
<div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<fieldset>
<legend>用户注册</legend>
<form name="RegForm" method="post" action="__URL__/doRegister" onsubmit="return InputCheck(this)">
<p>
<label for="email" class="label">电子邮箱:</label>
<input id="email" name="email" type="text" class="input" />
<span>(必填)<span id="errorEmail" style="display:none;color:red;">e.g. example@gamil.com</span></span>
</p>
<p>
<label for="password" class="label">创建密码:</label>
<input id="password" name="password" type="password" class="input" />
<span>(必填)<span id="errorPassword" style="display:none;color:red">密码不得少于6位</span></span>
</p>
<p>
<label for="username" class="label">真实姓名:</label>
<input id="username" name="username" type="text" class="input" />
<span>(必填)<span id="errorUsername" style="display:none;color:red"></span></span>
</p>
<label for="sex">性   别:</label>
<select name="sex" id="sex">
<option value="请选择">请选择</option>
<option value="男">男</option>
<option value="女">女</option>
</select><span id="errorSex" style="display:none;color:red">请选择性别</span>
<p>
</p>
<label for="birthday">生   日:</label>
<input type="text" id="datepicker" name="birthday" />
<span id="errorDatepicker" style="display:none;color:red"></span>
<p>
<input type="submit" name="submit" value="  提交注册  " class="left" />&nbsp;<span>已有账号？<a href="__APP__/login">登录</a></span>
</p>
</form>
</fieldset>
</div>
</body>
</html>